// 这里我们创建一个类
class goodsDetails{
 
	constructor(){
    // 这里调用从服务器中获取商品的方法
	this.huoQUGoods();
	
	
	}


	// 这里我们创建一个从服务器中获取商品的方法
	async huoQUGoods(){
		// 我们在这里获取,我们在商品列表页设置到localStorage中的gid的值,当做服务器需要id
		let gid =localStorage.getItem('gid');
		console.log(gid);

		const AUTH_TOKEN = localStorage.getItem('token')
        axios.defaults.headers.common['authorization'] = AUTH_TOKEN;
		let { status, data } = await axios.get('http://localhost:8888/goods/item',{
			params: {
				id: gid,	
			}
		});
		console.log(data);
		// 这里我们就可以创建一个变量来保存从数据库中提取的商品的信息
		let html=`<div class="container clearfix">

				
		<link rel="stylesheet" type="text/css" href="lib/swiper/swiper-bundle.min.css" />
		<script src="./lib/swiper/swiper-bundle.min.js"></script>
		
			<div class="swiper-container shopping-box fl" id="zhengti">
				
				<div class="swiper-slide"id="xiaoTu" >
					<img src="${data.info.img_big_logo}" width="560px" height="560px">						
					<div class="swiper-slide" id="xiaoHuangHe">	</div>	
				</div>

				<div class="swiper-slide1" id="daTu">
					 <img src="${data.info.img_big_logo}" width="800">					  
				</div>		
			</div>
	

		
		<div class="info fl" id="content">
			<h2>Readmi&nbsp;9A</h2>
			<p class="sale">「6GB+128GB版本直降100元，到手价低至899元；购机享碎屏保、延保8折优惠；+1元得200G 云空间月卡」<span>5000mAh长循环大电量 / 6.53"超大护眼屏幕 /
					G25八核处理器 / 大音量扬声器 / 1300万 AI相机 / 人脸解锁 / 最高支持512GB存储扩展</span></p>
			<p class="title">小米自营</p>
			<p class="data-v">${data.info.current_price}元<strike>${data.info.price}元</strike></p>
			<div class="xian"></div>
			<div class="id-box clearfix">
				<div class="icon iconfont fl">&#xe60c;</div>
				<div class="fl right">
					<span>北京</span><span>北京市</span><span>海定区</span><span>长河街道</span><a href="">修改</a>
					<p>有现货</p>
				</div>
			</div>
			<div class="color" id="color">
				<p class="tit">选择颜色</p>
				<span class="true tur" href="#">晴空蓝</span>
				<span class="true" href="">湖光绿</span>
				<span class="true" href="">砂石黑</span>
			</div>

			<div class="GB" id='GB'>
				<p class="tit">选择版本</p>
				<span class="true tur" href="">4G+64G</span>
				<span class="true" href="">4G+128G</span>
				<span class="true" href="">6G+128G</span>
			</div>

			<ul class="clearfix data-b" id="bh">
				<div class="tit ">选择小米提供的意外保护
					<a href="" class="fr">了解意外服务></a>
				</div>
				<li class="clearfix">
					<div class="fl">
						<span class="rudiu"></span><img width="50" src="img/shopping/ia_100000228.png">
					</div>
					<div class="fl txt">
						<h3>意外保障服务<span class="rmb">99元</span></h3>
						<p class="yw">手机意外碎屏/进水/碾压等损坏</p>
						<p class="clearfix quer">
							<span class="bod"></span>我以阅读<a href="">服务条款 &nbsp;|</a><a href="">常见问题</a><span class="fr fri">99元</span>
						</p>
					</div>
				</li>
				<li class="clearfix bd-t">
					<div class="fl">
						<span class="rudiu"></span><img width="50" src="img/shopping/ia_100000228.png">
					</div>
					<div class="fl txt">
						<h3>意外保障服务<span class="rmb">已省12元</span></h3>
						<p class="yw">手机意外碎屏</p>
						<p class="clearfix quer">
							<span class="bod"></span>我以阅读<a href="">服务条款 &nbsp;|</a><a href="">常见问题</a><span class="fr fri">47元</span>
						</p>
					</div>
				</li>
			</ul>
			<ul class="clearfix data-b" id="bx">
				<div class="tit">选择小米提供的延长保修
					<a href="" class="fr">了解延长保修></a>
				</div>
				<li class="clearfix">
					<div class="fl">
						<span class="rudiu"></span><img width="50" src="img/shopping/ia_100000228.png">
					</div>
					<div class="fl txt">
						<h3>延长报保修服务<span class="rmb">已省6元</span></h3>
						<p class="yw">厂保延一年，性能故障免费维修</p>
						<p class="clearfix quer">
							<span class="bod"></span>我以阅读<a href="">服务条款 &nbsp;|</a><a href="">常见问题</a><span class="fr fri">23元</span>
						</p>
					</div>
				</li>
			</ul>
			<ul class="clearfix data-b" id="fw">
				<div class="tit">选择小米提供的云空间服务
					<a href="" class="fr">了云空间服务></a>
				</div>
				<li class="clearfix">
					<div class="fl">
						<span class="rudiu"></span><img width="50" src="img/shopping/ia_100000232.png">
					</div>
					<div class="fl txt">
						<h3>云空间年卡200G<span class="rmb">159元</span></h3>
						<p class="yw">主商品签收后，自动激活至下单帐号</p>
						<p class="clearfix quer">
							<span class="bod"></span>我以阅读<a href="">服务条款 &nbsp;|</a><a href="">常见问题</a><span class="fr fri">159元</span>
						</p>
					</div>
				</li>
				<li class="clearfix">
					<div class="fl">
						<span class="rudiu"></span><img width="50" src="img/shopping/ia_100000232.png">
					</div>
					<div class="fl txt">
						<h3>云空间年卡 50G<span class="rmb">49元</span></h3>
						<p class="yw">主商品签收后，自动激活至下单帐号</p>
						<p class="clearfix quer">
							<span class="bod"></span>我以阅读<a href="">服务条款 &nbsp;|</a><a href="">常见问题</a><span class="fr fri">49元</span>
						</p>
					</div>
				</li>
				<li class="clearfix">
					<div class="fl">
						<span class="rudiu"></span><img width="50" src="img/shopping/ia_100000232.png">
					</div>
					<div class="fl txt">
						<h3>云空间月卡 200G<span class="rmb">已省18元</span></h3>
						<p class="yw">主商品签收后，自动激活至下单帐号</p>
						<p class="clearfix quer">
							<span class="bod"></span>我以阅读<a href="">服务条款 &nbsp;|</a><a href="">常见问题</a><span class="fr fri">1元</span>
						</p>
					</div>
				</li>
				<li class="clearfix">
					<div class="fl">
						<span class="rudiu"></span><img width="50" src="img/shopping/ia_100000232.png">
					</div>
					<div class="fl txt">
						<h3>云空间月卡 50G<span class="rmb">已省6元</span></h3>
						<p class="yw">主商品签收后，自动激活至下单帐号</p>
						<p class="clearfix quer">
							<span class="bod"></span>我以阅读<a href="">服务条款 &nbsp;|</a><a href="">常见问题</a><span class="fr fri">6元</span>
						</p>
					</div>
				</li>
			</ul>

			<div class="total">
				<p class="text"><i class="title-name">Redmi 9A</i> 4GB+64GB 晴空蓝<span class="price">599元</span></p>
				<p class="total-rmb">总计：<span>${data.info.price}</span>元</p>
			</div>
			<a class="shopcar" id='shopcar' href="javascript:;">加入购物车</a><a class="love" href="">喜欢</a>
			<div class="nav-but iconfont">&#xe610;小米自营&nbsp;&#xe610;&nbsp;小米发货&#xe610;&nbsp;7天无理由退款&#xe610;&nbsp;运费说明&#xe610;&nbsp;企业信息&#xe610;&nbsp;售后服务政策&#xe610;&nbsp;7天价格保护</div>
		</div>
	</div>`
      // 这里我们需要获取页面中想要追加内容的父元素节点
     let content =this.$('.content');
	//  console.log(content);
	 content.innerHTML+=html;

     // 这里我们实现一个点击加入购物车,的按钮,就将商品添加到服务器的中,并提示一个模态框,说明是否要跳转到购物车的页面
	// 获取 加入购物车按钮的节点,并给其绑定点击事件
	// 注意将代码写在这里是因为同步和异步的问题,如果写在构造函数中, 执行这个代码时,服务器中的数据还没有获取成功,
	this.$('.shopcar').addEventListener('click',this.getShopping);
    console.log(this.$('.shopcar'));

	// 在这里调用放大镜的方法,这里也是涉及到了同步和异步的问题
	this.fangDaJing();

	}





	// 创建一个放入到购物车的代码使用post请求
    //   需要两个参数,一个是用户id,一个是商品的id
	getShopping(){
   let Gid=localStorage.getItem('gid');
   let Uid=localStorage.getItem('user_id');
    //  这是获取服务器中购物车的数据需要携带的token的信息
		const AUTH_TOKEN = localStorage.getItem('token')
		axios.defaults.headers.common['authorization'] = AUTH_TOKEN;
		//  axios.defaults.headers.common.authorization = AUTH_TOKEN
		//     headers['Content-Type']  也是 给 headers 对象中添加属性,只是. 语法不支持 Content-Type
		axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';
		// axios.defaults.headers.Content-Type='application/x-www-form-urlencoded'
		
       let  param=`id=${Uid}&goodsId=${Gid}`;
	   
		// 使用post请求我们就需要设置请求头来,设置请求的格式,不设置的话默认是JSON格式的,我们想要form形式

		//   这里是要给服务器传递一个用户的秘钥  也就是我们添加在localStorage中的token的值  
		// 我们用AUTH_TOKEN来保存并传递到服务器中
	
		// 这里是设置post的请求头
			axios.post('http://localhost:8888/cart/add', param)
			.then(({ data, status }) => {
			// console.log(data ,status);
			// 这里是判断服务器的状态,和数据的状态,当服务器状态==200,并且数据的状态==1 的时候就表示加入购物车成功
			if(data.code==1 && status==200){
				// 这使用了一个插件来,让页面可以显示出一个模态框
				layer.open({
					// 这里是模态框的标头
					title: '在线调试'
					// 这里是内容
					,content: '配置各种参数，试试效果'
					// 这里是按钮的
					,btn: ['先不看', '公子,您的物品在等你']
					//  这里是点击第二按钮的回调函数
					,btn2: function(){
						// 这里是当点击第二个按钮就跳转页面
					   location.assign('./cart2.html');
					}
				  });  
			}else if(data.code=401 && status==200){
				// 这里主要是判断,当数据的状态==401的时候,也就表示我们登入已经过期了,需要重新登入
				// 这里是登入之前,删除我们登入成功 以后添加到localStorage中的数据 ,并跳转到登入页面
				localStorage.removeItem('token');
				localStorage.removeItem('user_id')
				// 这里是跳转到登入页面
				location.assign('./login.html#returnUrl=./shopping.html');

			}else {
				// 这里是当上面的条件都不成立的话,就执行这里的代码
				layer.open({
				  title: '失败提示框'
				  , content: '大爷,你走措地了'
				  , time: 3000
				},function(){
					location.assign('./login.html#returnUrl=./shopping.html');
				});
				
			  }
		   })
           
	}



/**********创建一个实现放大镜的方法**********/
// 这里我们还需要到那个和服务器交互的方法中调用才行,这个也是同步和异步的问题
fangDaJing(){

// 获取整体的盒子节点
let zhengti=this.$('#zhengti');
console.log(zhengti);


//    获取页面中图片的节点,  
let xiaoTu=this.$('#xiaoTu');

// 在获取图片上面小黄盒的节点
let box=this.$('#xiaoHuangHe')


//   获取大盒子的节点
let  daTu=this.$('#daTu');


// 获取大盒子中图片的节点
let  img=this.$('#daTu img');

// 获取我们拼接的包含内容的节点info
let info=this.$('#content');
console.log(info);

// 给图片设置移入事件,并显示 小黄盒,和大图
xiaoTu.onmouseover=()=>{
	box.style.display='block';
	daTu.style.display='block';
	info.style.opacity=0.2;
	

}

// 给xiaoTu设置移出事件,并显示 小黄盒,和大图
xiaoTu.onmouseout=()=>{
	box.style.display='none';
	daTu.style.display='none';
	info.style.opacity=1;
}


// 给xiaoTu设置移动事件
xiaoTu.onmousemove=(eve)=>{
//  获取鼠标在可视区X轴的距离
let x=eve.pageX;
// console.log(x);
// 获取鼠标在可视区Y轴的距离
let  y=eve.pageY;

// 获取整体盒子到文档上方的距离
let offTop=zhengti.offsetTop;

// 获取整体盒子到文档左边的距离
let offLeft=zhengti.offsetLeft;
// 使用鼠标的的坐标减去,整体盒子到文档的距离,就可得到小黄盒在  图片盒子中的位置
let huangX=x-offLeft;
let huangY=y-offTop;
// console.log(huangY);
// 这样的鼠标的位置就是小黄盒的左上角的位置,我们想要将鼠标出现在小黄盒的中,需要在减去小黄盒高度和宽度的一半
huangX-=box.offsetWidth/2;
huangY-=box.offsetHeight/2;
// console.log(huangX);


// 这里我们换需要在限制一下,小黄盒可以在图片盒子中可以移动的最大距离
let maxX=xiaoTu.offsetWidth-box.offsetWidth;
let maxY=xiaoTu.offsetHeight-box.offsetHeight;


// 这里进行判断一下如果鼠标在图片中的值是负数的时候,就强行将huangX该为0
huangX=huangX<0 ? 0 : huangX;
huangX=huangX>maxX ? maxX : huangX;

huangY=huangY<0 ? 0 :huangY;
huangY=huangY>maxY ? maxY : huangY;
// 这里就将获取到的实时坐标设置给小黄盒 的top 和left

box.style.top=huangY+'px';
box.style.left=huangX+'px';

//  3. 黄色盒子覆盖到哪里,对应的大盒子里图片展示哪里
//  huang移动的距离 / huang移动的最大距离 == img移动的距离 / img移动的最大距离

// 	img移动的距离 = huang移动的距离 / huang移动的最大距离 * img移动的最大距离
//  3.1 计算img移动的最大距离  img的宽 - big的宽
    // 获取大图片在大盒子中的最大距离
	let imgMaxX=img.offsetWidth-daTu.offsetWidth;
	let imgMaxY=img.offsetHeight-daTu.offsetHeight;
	// console.log(imgMaxY);

	  //       3.2 根据公式计算img应该移动多少
   var imgX = huangX / maxX * imgMaxX;
   var imgY = huangY / maxY * imgMaxY;


      //              3.3 给img赋值,负值
   img.style.left = -imgX + 'px';
   img.style.top = -imgY + 'px';

}









// // 给xiaoTo 设置移动事件,
// xiaoTu.onmousemove=(e)=>{
// //    在图片中移动的时候

//    //        2.2 在事件处理函数中,获取到鼠标在可视区的坐标
//    var x = e.clientX;
//    var y = e.clientY;
//    //        2.3 在事件处理函数中,获取相对于body的左,上偏移量
//    var offLeft = box.offsetLeft;
//    var offTop = box.offsetTop;
//    //        2.4 计算鼠标在small里面的坐标  可视区坐标 - box的偏移量
//    var targetX = x - offLeft;
//    var targetY = y - offTop;

//    //
//    //        2.6 让鼠标到mask中间(其实是mask在鼠标坐标的基础上,往左,往上,自己宽高的一半)
//    targetX -= box.offsetWidth / 2;
//    targetY -= box.offsetHeight / 2;
//    //   console.log(targetX);
//    //        2.7 限制mask的位置
//    //              2.7.1 获取最大,最小距离
//    var maxX = xiaoTu.offsetWidth - box.offsetWidth //small的宽 - mask的宽
//    var maxY = xiaoTu.offsetHeight - box.offsetHeight //small的宽 - mask的宽
//    //              2.7.2 判断有没有超出最大/最小距离
//    targetX = targetX < 0 ? 0 : targetX;
//    targetX = targetX > maxX ? maxX : targetX;
//    targetY = targetY < 0 ? 0 : targetY;
//    targetY = targetY > maxY ? maxY : targetY;
//    //        2.5 给mask赋值,渲染
//    box.style.left = targetX + 'px';
//    box.style.top = targetY + 'px';

   //        3. 黄色盒子覆盖到哪里,对应的大盒子里图片展示哪里
   //              mask移动的距离 / mask移动的最大距离 == img移动的距离 / img移动的最大距离
   //
   //              img移动的距离 = mask移动的距离 / mask移动的最大距离 * img移动的最大距离
   //              3.1 计算img移动的最大距离  img的宽 - big的宽
//    var imgMaxX = img.offsetWidth - big.offsetWidth;
//    var imgMaxY = img.offsetHeight - big.offsetHeight;
   //              3.2 根据公式计算img应该移动多少
//    var imgX = targetX / maxX * imgMaxX;
//    var imgY = targetY / maxY * imgMaxY;
   //              3.3 给img赋值,负值
//    img.style.left = -imgX + 'px';
//    img.style.top = -imgY + 'px';

// }



// console.log(daoTuPian);





 
}






	/************这里我们可以创建一个获取节点的方法**********/
	$(ele){
		let node=document.querySelectorAll(ele);
		return node.length==1 ? node[0] : node;
	}

	
}
// 创建类的实例化对象
new goodsDetails;









	//滚动事件
	$(window).scroll(function() {
		var scrollTop = $(document).scrollTop();
		// console.log(scrollTop);
		if (scrollTop >= 550) {
			$('.head').fadeIn();
		} else {
			$('.head').fadeOut();
		}
	})


	//回到顶部
	$('.head').click(function() {
		$('html,body').animate({ scrollTop: 0 }, 500);
	});

	// 点击产品信息
	$('  #color .true').click(function() {
		$('#color .true').css('border', '1px solid #d1d1d1');
		$('#color .true').css('color', '#000000');
		$(this).css('border', '1px solid #ff6700');
		$(this).css('color', ' #ff6700');
	});

	$('  #GB .true').click(function() {
		$('#GB .true').css('border', '1px solid #d1d1d1');
		$('#GB .true').css('color', '#000000');
		$(this).css('border', '1px solid #ff6700');
		$(this).css('color', ' #ff6700');
	});

	$('#bh li').click(function() {
		$(' #bh li').css('border', '1px solid #d1d1d1');
		$(this).css('border', '1px solid #ff6700');
	});
	$('#bx li').click(function() {
		$(' #bx li').css('border', '1px solid #d1d1d1');
		$(this).css('border', '1px solid #ff6700');
	});
	$('#fw li').click(function() {
		$(' #fw li').css('border', '1px solid #d1d1d1');
		$(this).css('border', '1px solid #ff6700');
	});


